<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" @close="onClose">
    <center>
      <div class="pay-title">
        <div v-if="form.payWay === '01_WXPAY_STCTP'">微信支付</div>
        <div v-if="form.payWay === '01_ALIPAY_STCTP'">阿里支付</div>
        <div v-if="form.payWay === '01_UNIONPAY_STCTP'">银联支付</div>
      </div>
      <el-image
        style="width: 300px; height: 300px"
        :src="this.form.url"
      ></el-image>
    </center>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { getOne } from '@/api/sysPay'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      form: {
        id: '',
        url: '',
        payWay: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    init() {
      if (this.form.id) {
        getOne(this.form.id).then((res) => {
          if (res && res.code === 20000) {
            const rtn = res.data
            this.form.id = rtn.id
            this.form.url = rtn.url
            this.form.payWay = rtn.payWay
          }
        })
      }
    },
    onShow(id) {
      if (id) {
        this.form.id = id
        this.title = '扫码支付'
        this.init()
      }
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.el-form {
  padding: 20px 20px;
}

.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.pay-title {
  font-size: 18px;
  font-weight: bold;
  color: red;
}
</style>
